<template>
<!--  <div>-->
<!--    <Top></Top>-->
    <div id="Content">
      <!--登陆主模块-->
      <div id="BackLink">
        <a href="#/">Return to Main Menu</a>
        <!--路径可能需要改-->
      </div>
      <div id="Catalog">
        <form method="post" @submit.prevent="login">
          <p>Please enter your username and password.</p>
          <span v-if="signOnMsg !== null || signOnMsg !== ''">
            <p style="color: red">{{ signOnMsg }}</p>
          </span>
          <p>
            Username:<input type="text" name="username" v-model="username" />
            <br />
            Password:<input
              type="password"
              name="password"
              v-model="pwd"
            /><br />
          </p>
          <input type="submit" value="Login" />
        </form>

        Need a user name and password?
        <a href="#/newAccount">Register Now!</a>
      </div>
    </div>
<!--  </div>-->
</template>

<script>
import axios from 'axios';
import Top from '../common/top.vue'
export default {
  name: "login",
  data() {
    return {
      signOnMsg: "",
      username: "",
      pwd: "",
    };
  },
  components:{
    Top
  },
  methods: {
    login() {
      axios({
        method: "post",
        url: "http://localhost:8080/jpetstore/token",
        data: {
          username: this.username,
          password: this.pwd,
        },
      })
    .then((r) => {
          if (r.data.data=== "登录成功") {
            this.signOnMsg = null;
            //跳转到已经登陆的主界面
            this.$router.push({
              path: "/",
              query: { username: this.username }, //传递参数用户名
            });
          } else {
            console.log(this.username);
            this.signOnMsg = r.data.data;
            // this.$router.push({
            //   path: "/",
            //   query: { username: this.username }, //传递参数用户名
            // })
          } //这里没有登陆出错signOnMsg的具体信息
        })
        .catch((r) => {
          console.log(r);
        });
    },
  },
};
</script>

<style scoped>
</style>